<template>
<div>	
	<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;margin-top:0px;margin-bottom:5px;">
			<el-form :inline="true">
			  	<el-col :span="24">
					<el-form-item lable="责任代码" style="width: 10%;">
						<el-input v-model="formData.itemcode" size="small" placeholder="责任代码"></el-input>
					</el-form-item>
					<el-form-item lable="责任名称" >
						<el-input v-model="formData.itemcname" size="small" placeholder="责任名称"></el-input>
					</el-form-item>
					<el-form-item lable="创建日期">
						<el-date-picker type="date" placeholder="创建日期" v-model="formData.createdate" size="small"></el-date-picker>
					</el-form-item>
					<el-form-item lable="是否有效" style="width: 10%;">
						<el-select v-model="formData.validstatus" placeholder="是否有效" size="small" >
							<el-option v-for="item in validOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button size="small" type="primary" @click="queryData()" icon="search">查询</el-button>
					</el-form-item>
					<el-form-item>
						<el-button size="small" @click="reset()"><i class="fa fa-undo"></i> 重置</el-button>
					</el-form-item>
			  	</el-col>
			</el-form>
		</el-col>

		<el-table :data="tableData" v-loading="loading" element-loading-text="处理中......" ref="multipleTable" border style="width: 100%;" :height="tableHeight" :highlight-current-row="true" @selection-change="rowSelected" @sort-change="orderBy" @row-click="rowSelect" @row-dblclick="showDetail">
		 	<el-table-column type="selection" width="55"></el-table-column>
			<el-table-column prop="itemcode" label="标的/责任代码" sortable="custom" width="160"></el-table-column>
			<el-table-column prop="itemcname" label="标的/责任中文名称" sortable="custom" show-overflow-tooltip min-width="240"></el-table-column>
			<el-table-column prop="itemename" label="标的/责任英文名称" sortable="custom" show-overflow-tooltip min-width="240"></el-table-column>
			<el-table-column prop="startdate" label="生效日期" width="150" sortable="custom" :formatter="dateFormater"></el-table-column>
			<el-table-column prop="enddate" label="失效日期" width="150" sortable="custom" :formatter="dateFormater"></el-table-column>
			<el-table-column prop="validstatus" label="是否有效" width="120" sortable="custom" :formatter="validFormater"></el-table-column>
		</el-table>

		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;margin-top:0px;margin-bottom:5px;">
			<el-form :inline="true">
				<el-col :span="14">
					<el-col :span="24">
						<el-form-item>
							<el-button size="small" type="warning" @click="openAddDialog()" icon="plus">新增</el-button>
						</el-form-item>
						<el-form-item>
							<el-button size="small" type="primary" @click="openEditDialog()" icon="edit">修改</el-button>
						</el-form-item>
						<!-- <el-form-item>
							<el-button size="small" type="default" @click="openLogDialog()"><i class="fa fa-search-plus"></i> 查看日志</el-button>
						</el-form-item> -->
						<!-- <el-form-item>
							<el-button size="small" type="warning" @click="linkRisk()"><i class="fa fa-link"></i> 关联【险种】</el-button>
						</el-form-item> -->
					</el-col>
				</el-col>
				<el-col :span="10">
					<div class="block" style="float:right">
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
						      :current-page="formData.currentPage"
						      :page-sizes="[15, 30, 45]"
						      :page-size="formData.pageSize"
						      layout="total, sizes, prev, pager, next, jumper"
						      :total="total">
						    </el-pagination>
					</div>
				</el-col>
			</el-form>
		</el-col>

		<ItemAdd v-if="showAddDialog"></ItemAdd>
		<ItemEdit v-if="showEditDialog"></ItemEdit>
		<ItemDetail v-if="showDetailDialog"></ItemDetail>
</div>
</template>

<script>
import ItemAPI from "../../../js/production/item/itemAPI";
import dateUtil from "../../../common/js/dateUtil";
import Utils from"../../../js/production/utils";
import ItemAdd from "./dialog/ItemAdd";
import ItemEdit from "./dialog/ItemEdit";
import ItemDetail from "./dialog/ItemDetail";
export default {
  components : {
  	ItemAdd,
  	ItemEdit,
  	ItemDetail,
  },
  data () {
    	return {
    		formData: {
    		        currentPage: 1,
	                    pageSize: 15,
	                    itemcode : '',
	                    itemcname : '',
	                    itemename : '',
	                    itemflag : '',
	                    createdate: undefined,
	                    validstatus : '',
	                    flag : '',
	                    orderBy: '',
	                    order: '',
    		},
    		tableData: [],
    		selectedRows: [],
    		total: 0,
		validOptions: [{
			label : '1-有效',
			value: '1'
		},{
			label : '0-无效',
			value: '0'
		}],
		isSortRequest: false,	//是否请求 
		showEditDialog: false,
		showAddDialog: false,
		showDetailDialog: false,
		showLogDialog: false,
		rowDetail: {},
		tableHeight: 0,
		loading : false
	}
  },
  mounted() {
  	this.tableHeight = Utils.getScreenHeight()*0.72;
  	let vm = this;
  	document.onkeydown = function(e) {
  		if(e.keyCode == 13) {
  			vm.queryData();
  		}
  	}
  },
  methods: {
		queryData() {
			if (this.formData.createdate === '') {
				this.formData.createdate = undefined;
			}
			ItemAPI.queryItem(this);
		},
		openEditDialog() {
			ItemAPI.openEditDialog(this);
		},
		openAddDialog() {
			this.showAddDialog = true;
		},
		rowSelect(row) {
			this.$refs.multipleTable.toggleRowSelection(row);
		},
		rowSelected(rows) {
			this.selectedRows = rows;
		},
		handleSizeChange(val) {
			this.formData.pageSize = val;
			this.queryData();
		},
		handleCurrentChange(val) {
			this.formData.currentPage = val;
			this.queryData();
		},
		dateFormater(row,  column) {  
			var  date  =  row[column.property];            
			if  (date  ==  undefined)  {               
				return  "";            
			}  
			return dateUtil.getDateyMd(date);
		},
		validFormater(row,  column) {  
			var  valid =  row[column.property];            
			if  (valid ==  undefined)  {               
				return  "";            
			}  
			if (valid == 1) {
				return "有效";
			}
			if (valid == 0) {
				return "无效";
			}
		},
		reset() {
			this.formData.itemcode = '';
			this.formData.itemcname = '';
			this.formData.createdate = undefined;
			this.formData.validstatus = '';
			this.formData.currentPage = 1;
			this.queryData();
		},
		orderBy(column, prop, order) {
			if (typeof(column) != 'undefined') {
				this.formData.orderBy = column.prop;
				if (column.order == 'descending') {
					this.formData.order = 'desc';
				} else {
					this.formData.order = 'asc';
				}
			}
			if (this.isSortRequest) {
				this.isSortRequest = false;
				this.queryData();
			}
		},
		showDetail(row, event) {
			this.rowDetail = row;
			this.showDetailDialog = true;
		},
		rowSelect(row) {
			this.$refs.multipleTable.toggleRowSelection(row);
		},
		openLogDialog() {
			// KindAPI.openLogDialog(this);
		},
  }
}
</script>